:root.dark {
  .shiki {
    background-color: var(--shiki-dark-bg) !important;
    font-style: normal !important; /* 代码块渲染禁止斜体 */
    /* font-style: var(--shiki-dark-font-style) !important; */
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;

    span {
      color: var(--shiki-dark) !important;
    }
  }

  .shiki-twoslash {
    code span {
      color: var(--shiki-dark) !important;
    }
  }
}

/* Shiki Twoslash */
.twoslash-meta-line,
.twoslash-tag-line {
  @apply my-1 flex min-w-full items-center gap-2 whitespace-break-spaces border-l-2 px-3 py-2.5;
  margin-left: 2rem;
}

.twoslash-error-line,
.twoslash-tag-error-line {
  @apply border-red-600 bg-red-300/20 text-red-500;
}

.twoslash-tag-log-line {
  @apply border-blue-600 bg-blue-300/20 text-blue-500;
}

.twoslash-tag-warn-line {
  @apply border-yellow-600 bg-yellow-300/20 text-yellow-600;
}

.twoslash-tag-annotate-line {
  @apply border-green-600 bg-green-300/20 text-green-600;
}

.twoslash-error {
  @apply bg-left-bottom bg-repeat-x pb-0.5;

  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23c94824'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.twoslash-hover {
  @apply border-b border-dotted border-transparent transition-[border] duration-500;
  .shiki:hover & {
    @apply border-color-4;
  }
}

.twoslash-completions-matched {
  @apply font-semibold text-blue-600;
}

.twoslash-completion-list {
  @apply min-w-[200px] p-1.5;

  li {
    @apply flex items-center gap-1 text-sm text-color-2;
  }
}

.twoslash-completions-icon > svg {
  @apply size-3;
}

.twoslash-popup-docs-tag {
  @apply block;

  &-name {
    @apply mr-2 opacity-80;
  }

  &-value {
    code {
      @apply mx-0.5 rounded bg-surface-3 px-1.5 py-0.5 text-sm;
    }
  }
}

/* Shiki transformers */
.shiki {
  .diff,
  .highlighted {
    /* width: calc(100% + theme('spacing.10')); */
    /* min-width: calc(100% + theme('spacing.10')); */
    @apply relative inline-block;
    margin-left: 0;
  }

  .highlighted,
  .highlighted-word {
    @apply bg-sky-50 dark:bg-white/20;
  }

  .highlighted {
    &.error {
      @apply bg-red-500/30;
    }
    &.warning {
      @apply bg-yellow-500/30;
    }
  }

  .highlighted-word {
    @apply rounded px-1 py-0.5;
  }

  .diff {
    &.remove,
    &.add {
      @apply before:absolute before:left-2.5 before:-translate-x-1/2;
      /* padding-left: 2.5rem; */
    }

    &.remove {
      @apply !bg-red-600/20 before:text-red-400 before:content-['-'];
    }

    &.add {
      @apply !bg-green-500/20 before:text-green-400 before:content-['+'];
    }
  }

  &.has-focused {
    span.line:not(.focused) {
      @apply transition-[filter];
    }
    &:not(:hover) {
      span.line:not(.focused) {
        @apply opacity-70 blur-[2px];
      }
    }
  }
}

/* span.line.highlighted::before {
  text-align: unset !important;
  left: -7.5px !important;
  right: -0.1rem !important;
  width: 0.75rem !important;
} */

.line.diff::before {
  content: counter(step) var(--tw-content, 'default') !important;
  /* margin-left: 0.31rem !important; */
  left: 0.74rem !important;
  /* letter-spacing: 0.1rem; */
}

.line.diff.remove::before {
  color: rgb(248 113 113 / var(--tw-text-opacity)) !important;
}

.line.diff.add::before {
  color: rgb(74 222 128 / var(--tw-text-opacity)) !important;
}

.small-line-numbers code .line {
  position: relative;
}

code .line {
  display: inline-block;
}

/* 代码块增加行号和竖线 */
code {
  counter-reset: step;
  counter-increment: step 0;
}

code .line::before {
  content: counter(step) ' ' !important;
  counter-increment: step !important;
  width: 2rem !important;
  margin-right: 0.5rem !important;
  display: inline-block !important;
  text-align: right !important;
  color: rgba(100, 120, 130, 0.6) !important;
  position: relative !important;
  left: -4px !important;
}

code .line {
  position: relative;
}

code .line::after {
  content: '';
  position: absolute;
  left: 2rem;
  top: 0;
  bottom: 0;
  border-left: 1px solid rgba(100, 120, 130, 0.6);
}

/* code .line:last-child{
  display: none !important;
} */

code .line:last-child:empty {
  display: none !important;
}

/* 定义代码块之间的间距 */
.code-block-spacing {
  margin-bottom: 1em;
}

.small-line-numbers code .line::before {
  font-size: smaller;
  content: counter(step) ' ';
  counter-increment: step;
  width: 2.15rem;
  margin-right: 0.3rem;
  display: inline-block;
  text-align: right;
  color: rgba(100, 120, 130, 0.6);
  position: relative;
  left: -1px;
}

.small-line-numbers code .line::after {
  content: '';
  position: -webkit-sticky;
  left: 2rem;
  top: 0;
  bottom: 0;
  height: 120%; /* 解决Chromium内核浏览器竖线不连接的问题 */
  border-left: 1px solid rgba(100, 120, 130, 0.6);
}

.small-line-numbers code {
  font-size: smaller;
}

.small-line-numbers pre {
  border-radius: 0.375rem;
}

.small-line-numbers img {
  border-radius: 0.25rem;
}

.absolute-small {
  width: 4.2rem;
  height: 2rem;
}

.small-line-numbers .copy-button {
  @apply right-3;
  font-size: smaller;
  .absolute-small {
    width: 4.05rem;
    height: 2rem;
  }
}

/* 解决代码越界bug */
.shiki {
  overflow-x: auto;
  overflow-y: hidden;
}

.code-group-disable-spacing div.relative:nth-child(n) > pre:nth-child(n) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.code-group-disable-spacing .code-block-spacing {
  margin-bottom: 0em;
}
